<template>
    <tr>
      
      <td v-show="!is_edit">{{ student.number }}</td>
      <td v-show="!is_edit">{{ student.name }}</td>
      <td v-show="!is_edit">{{ student.age }}</td>
      <td v-show="!is_edit">{{ student.chi }}</td>
      <td v-show="!is_edit">{{ student.math }}</td>
      <td v-show="!is_edit">{{ student.eng }}</td>
      <td v-show="!is_edit">
        <el-button type="primary" @click="modify">修改</el-button>
      </td>
      <td v-show="!is_edit">
        <el-button type="danger" @click="deletestudent">删除</el-button>
      </td>
<!-- 隐藏界面 -->
      <td v-show="is_edit"><input type="text" class="w-50" v-model="student.number"/></td>
      <td v-show="is_edit"><input type="text" class="w-50" v-model="student.name"/></td>
      <td v-show="is_edit"><input type="text" class="w-50" v-model.number="student.age"/></td>
      <td v-show="is_edit"><input type="text" class="w-50" v-model.number="student.chi"/></td>
      <td v-show="is_edit"><input type="text" class="w-50" v-model.number="student.math"/></td>
      <td v-show="is_edit"><input type="text" class="w-50" v-model.number="student.eng"/></td>
      <td v-show="is_edit">
        <el-button type="primary" @click="save">保存</el-button>
      </td>
      <td v-show="is_edit">
      
      <el-button type="danger" @click="is_edit=!is_edit">取消</el-button>
      </td>
    </tr>
    
</template>

<script>
import axios from 'axios'
export default {
    // 接受App父组件传过来的student
    props:["student"],
    data(){
        return{
            is_edit:false
        }
    },
    methods:{
        modify(){
            this.is_edit=true
        },
        save(){
            axios({
                url:"http://localhost:8088/update",
                method:'POST',
                data:this.student
            })
            this.is_edit=false
        },
        getstudents(){
      axios({
        url:"http://localhost:8088/students",
        method:'GET'
      }).then(res=>{
        this.students=res.data
        console.log(res.data)
      })
    },
    deletestudent(){
        axios({
            url:"http://localhost:8088/delete",
            method:'POST',
            data:this.student
        })
        .then(()=>{
            this.$parent.getstudents()//调用父组件方法
        })
        
    }
    }
}
</script>
<style>
</style>